<template>
    <div id="header_box">
        <el-input placeholder="搜索" class="custom_input">
            <i slot="prefix" style="display: flex;align-items: center;justify-content: center;height: 100%;margin-left: 17px;">
                <img src="@/assets/dash_img/search.svg" alt="">
            </i>
        </el-input>
        <div class="right_top_info">
            <div class="note_box">
                <img src="@/assets/dash_img/notifications.svg" alt="">
            </div>
            <div class="user_box">
                
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'headerPage'
    }
</script>

<style lang="scss" scoped>
#header_box{
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right_top_info{
        display: flex;
        align-items: center;
        justify-content: start;
        .note_box{
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 6px 58px  rgba(196, 203, 214, 0.1);
            img{
                width: 20px;
                height: 20px;
            }
        }
        .user_box{
            width: 194px;
            height: 48px;
            opacity: 1;
            border-radius: 14px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 6px 58px  rgba(196, 203, 214, 0.1);
            margin-right: 40px;
            margin-left: 24px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    }
    
}
::v-deep(.el-input__inner){
    height: 48px;
    opacity: 1;
    border-radius: 14px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 6px 58px  rgba(196, 203, 214, 0.1);
    font-size: 16px;
    color: rgba(125, 133, 146, 1);

}
::v-deep(.el-input--prefix .el-input__inner){
    padding-left: 55px;
}
.custom_input{
    width: 412px;
    .img{
        width: 19px;
        height: 19px;
    }
}
</style>